<template>
  <div style="padding: 1rem">
    <!-- 上方菜单 -->
    <div class="main">
      <div>
        <ElForm :inline="true">
          <ElFormItem>
            <ElDatePicker v-model="queryInfo.date" value-format="YYYY-MM-DD" type="date" placeholder="排片日期" />
          </ElFormItem>
          <ElFormItem>
            <ElButton @click="showMovieSelector(2)">{{ querytitle }}</ElButton>
          </ElFormItem>
          <ElFormItem>
            <ElButtonGroup>
              <ElButton type="danger" @click="reset">重置</ElButton>
              <ElButton type="primary" @click="requery">查询</ElButton>
            </ElButtonGroup>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="warning" @click="avisible = true">添加</ElButton>
          </ElFormItem>
        </ElForm>
      </div>
    </div>
    <!-- 数据呈现部分 -->
    <div>
      <ElTable :data="list">
        <ElTableColumn label="电影名称" prop="movie.title"></ElTableColumn>
        <ElTableColumn label="排片大厅名称" prop="hall"></ElTableColumn>
        <ElTableColumn label="放映时间">
          <template #default="scope">{{ Tools.formatDate(scope.row.startTime) }}</template>
        </ElTableColumn>
        <ElTableColumn label="操作">
          <template #default="scope">
            <ElButton size="small" type="danger" @click="del(scope.row)">删除</ElButton>
            <ElButton size="small" type="success" @click="showModify(scope.row)">修改</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </div>

    <!-- 电影选择对话框 -->
    <ElDialog title="选择电影" v-model="visible">
      <div>
        <MovieSelector @type-selected="movieselect"></MovieSelector>
      </div>
    </ElDialog>

    <!-- 添加的对话框 -->
    <ElDialog title="添加排片" v-model="avisible" @open="resetAdd" @close="requery">
      <div>
        <ElFormItem>
          <ElButton @click="showMovieSelector(1)">{{ addtitle }}</ElButton>
        </ElFormItem>
        <ElFormItem>
          <ElInput v-model="addInfo.hall" placeholder="大厅名称"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElDatePicker v-model="addInfo.startTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"></ElDatePicker>
        </ElFormItem>
        <ElButton type="danger" @click="resetAdd">重置</ElButton>
        <ElButton type="primary" @click="add">添加</ElButton>
      </div>
    </ElDialog>

    <!-- 修改的对话框 -->
    <ElDialog title="修改排片" v-model="mvisible" @close="requery">
      <div>
        <ElFormItem>
          <ElInput v-model="modifyInfo.hall" placeholder="大厅名称"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElDatePicker v-model="modifyInfo.startTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"></ElDatePicker>
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primary" @click="modify">修改</ElButton>
        </ElFormItem>
      </div>
    </ElDialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElButton, ElDatePicker, ElDialog, ElFormItem, ElInput, ElMessage, ElMessageBox, ElTable, ElTableColumn } from 'element-plus'
import { TbMovie, TbMovieScheduling } from '../../ts/types/CRUD'
import { BaseDataResult, BasePageVO, BaseResult, PageBean } from '../../ts/types/BaseResult'
import { ApiService } from '../../ts/ApiService'
import Tools from '../../ts/Tools'
import MovieSelector from '../../components/MovieSelector.vue'
import { log } from '../../ts/logger'

// #region 查询
const list = ref([] as Array<TbMovieScheduling>)
const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)

const queryInfo = ref({
  mid: -1,
  date: '',
})

const reset = () => {
  queryInfo.value = {
    mid: -1,
    date: '',
  }
  querytitle.value = '请选择电影名称'
  requery()
}

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const query = () => {
  ApiService.get(`/crud/moviescheduling/${page.value.pageSize}/${page.value.pageNumber}`, queryInfo.value, (resp: BaseDataResult<BasePageVO<Array<TbMovieScheduling>>>) => {
    if (resp.success) {
      list.value = resp.data.data
      page.value = resp.data.pageBean
    }
  })
}

query()
// #endregion

// #region 电影选择对话框
const visible = ref(false)
const vde = {
  dmode: 1,
}
const showMovieSelector = (mode: number) => {
  vde.dmode = mode
  visible.value = true
}

// 回调
const querytitle = ref('请选择电影名称')
const addtitle = ref('请选择电影名称')

const movieselect = (type: TbMovie) => {
  log.debug('选择的类型:', type)
  if (vde.dmode == 1) {
    addInfo.value.mid = type.mid
    addtitle.value = type.title
  } else if (vde.dmode == 2) {
    queryInfo.value.mid = type.mid
    querytitle.value = type.title
  }

  visible.value = false
}
// #endregion

// #region 添加的对话框
const avisible = ref(false)
const addInfo = ref({} as TbMovieScheduling)

const resetAdd = () => {
  addInfo.value = {} as TbMovieScheduling
  addtitle.value = '请选择电影名称'
}

const add = () => {
  ApiService.post('/crud/moviescheduling', addInfo.value, (resp: BaseResult) => {
    addInfo.value.startTime = Tools.formatDate(addInfo.value.startTime)
    resp.success ? ElMessage.success(resp.message) : ElMessage.error(resp.message)
    avisible.value = false
  })
}
// #endregion

// #region 修改的对话框
const mvisible = ref(false)
const modifyInfo = ref({} as TbMovieScheduling)

const showModify = (info: TbMovieScheduling) => {
  modifyInfo.value = Tools.concatJson(info)
  modifyInfo.value.movie = {} as TbMovie
  modifyInfo.value.startTime = Tools.formatDate(modifyInfo.value.startTime)
  mvisible.value = true
}

const modify = () => {
  ApiService.put('/crud/moviescheduling', modifyInfo.value, (resp: BaseResult) => {
    resp.success ? ElMessage.success(resp.message) : ElMessage.error(resp.message)
    mvisible.value = false
  })
}
// #endregion

// #region 删除
const del = (info: TbMovieScheduling) => {
  ElMessageBox.confirm(`是否删除：${info.hall}的${info.movie.title}`).then(() => {
    ApiService.delete(`/crud/moviescheduling/${info.msid}`, {}, (resp: BaseResult) => {
      resp.success ? ElMessage.success(resp.message) : ElMessage.error(resp.message)
      query()
    })
  })
}
// #endregion
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: flex-end;
}
.pre_info {
  font-size: 13px;
  white-space: pre-wrap; //文本换行
  word-wrap: break-word; //英文换行
}
</style>
